<template>
    <div class="header">
        <div :class="{ logo: true, collapsed: collapsed, uncollapsed: !collapsed }" @click="goHome">
            <img :src="collapsed ? Icon : Logo" alt="LOGO" />
        </div>
        <HeaderButton class="menu-fold" @click="switchCollapsed">
            <MenuFoldOutlined v-if="!collapsed" />
            <MenuUnfoldOutlined v-else />
        </HeaderButton>
        <span class="welcome"> 欢迎进入{{ settingStore.name }} </span>
        <div class="user-wrapper">
            <station v-if="isNormalUser" />
            <HeaderButton @click="handleSheet"> <img :src="Shouce" alt="数据手册" />数据手册 </HeaderButton>
            <a-divider class="line" type="vertical" />
            <HeaderButton @click="handleWarranty"> <img :src="Zhibaochaxun" alt="质保查询" />质保查询 </HeaderButton>
            <User />
        </div>
    </div>
</template>
<script setup>
import { computed, inject } from 'vue'
import { useRouter } from 'vue-router'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
import HeaderButton from '/@/components/HeaderButton/index.vue'
import { useSettingStore, useUserinfoStore } from '@iframe/tools/store'
import Station from '/@/components/Station/index.vue'
import User from './../../components/User/index.vue'
import Logo from '/@/assets/image/layouts/logo.png'
import Icon from '/@/assets/image/layouts/icon.png'
import Shouce from '/@/assets/image/layouts/icon-shouce.png'
import Zhibaochaxun from '/@/assets/image/layouts/icon-zhibaochaxun.png'

const router = useRouter()
const emit = defineEmits(['change'])
const collapsed = inject('collapsed')
const settingStore = useSettingStore()
const userinfoStore = useUserinfoStore()

const isNormalUser = computed(() => {
    return userinfoStore.getUserinfo.isAdmin === 0
})

const switchCollapsed = () => {
    emit('change')
}
const goHome = () => {
    router.push('/dashboard')
}

const handleSheet = () => {
    window.open('/manual.html')
}

const handleWarranty = () => {
    router.push('/inverter/warranty')
}
</script>
<style lang="less" scoped>
.header {
    color: #fff;
    display: flex;
    align-items: center;
    .collapsed {
        width: 80px;
        text-align: center;
    }

    .uncollapsed {
        width: 200px;
    }
    .logo {
        height: 64px;
        background-color: #4764e6;
        text-align: center;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menu-fold {
        font-size: 22px;
        float: left;
        margin-left: 20px;
        height: 40px;
        line-height: 40px;
    }

    .user-wrapper {
        flex: 1;
        box-sizing: border-box;
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .line {
            border-color: rgba(255, 255, 255, 0.7);
        }
        img {
            margin-right: 3px;
        }
    }
}
</style>
